<template>
  <div>
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="消息列表"
    ></van-nav-bar>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="app-page">
        <div v-for="(item, index) in list" :key="index" class="app-item">
          <div>
            <p>标题：</p>
            <div>{{ item.title }}</div>
          </div>
          <div>
            <p class="app-p">内容：</p>
            <div>{{ item.sendMsg }}</div>
          </div>
          <div>
            <p class="app-p">时间：</p>
            <div>{{ item.createTime }}</div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { MessageList } from "../../assets/js/api/user";
export default {
  name: "ListItem",
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      SPagination: 0 // 分页的页数
    };
  },
  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });
    // MessageList().then(res => {
    //   console.log(res);
    //   if (res.code == 0) {
    //     this.list = res.data;
    //   }
    // });
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      let pageSize = 10;
      let pageNum = this.SPagination + 1;
      this.SPagination++;
      let obj = {
        pageSize: pageSize,
        pageNum: pageNum
      };
      // console.log(obj);
      MessageList(obj).then(res => {
        // console.log(res);
        let size = res.data.size;
        for (let i = 0; i < res.data.list.length; i++) {
          this.list.push(res.data.list[i]);
        }
        // console.log(this.list);
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= size) {
          this.finished = true;
        }
      });
    },

    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style></style>
